<template>
  <div>
    <!--加载中...-->
    <waiting :updateData="!updateData"></waiting>
    <!--筛选-->
    <div class="filter-all-sort">
      <div v-for="(filterSort, index) of filterSorts" :key="index" :style="filterSort.style" class="sorting-one" @click="sorting(index)">
        <p :class="[{'is-filtering': filterSort.isFiltering}, 'filter-area']">
          {{filterSort.name}}
          <span>{{filterSort.oneRule}}</span>
          <span class="img-filter"><img :src="filterSort.isFiltering ? filterTop : filterBottom"></span>
        </p>
      </div>
      <div v-for="(filterSort, index) of filterSorts" :key="index" class="filter-start" v-show="changeSort === index">
        <p v-for="(select, index2) of filterSort.sortRules" :key="index2" :class="[{'selected-sort': filterSort.changeRule === index2}]" @click="changeOneSort(index, index2)"><!--{'year-vol': filterSort.name !== '排序：'}-->
          {{select}}
          <img v-if="filterSort.changeRule === index2 && filterSort.name === '排序：'" src="../assets/picture/select-sort.png" width="17" height="17">
        </p>
      </div>
    </div>
    <div class="filter-bg" v-show="changeSort !== ''" @touchstart="hideSort()"></div>
    <topsellings :tops="topselling"></topsellings>
  </div>
</template>

<script>
  import topsellings from '../components/topSelling'
  import waiting from '../components/waiting'

  import filterBottom from '../assets/picture/filter-bottom.png'
  import filterTop from '../assets/picture/filter-top.png'
  export default {
    name: 'recommend-top',
    components: {
      topsellings,
      waiting
    },
    data () {
      return {
        filterBottom: filterBottom,
        filterTop: filterTop,
        hasHeader: '',
        filterSorts: [
          {name: '选择酒评家：', oneRule: '全部', isFiltering: false, changeRule: 0, sortRules: ['全部', 'Wine Advocate', 'Wine Spectator', 'Decanter', 'Jancis Robinson', 'James Suckling', 'Wine Enthusiast', 'Gilbert Gaillard', 'Cellartracker', 'Liv-ex', 'Gault & Milleu'], style: {width: '100%'}}
        ],
        // page: 1, // 页码
        // size: 10, // 一页多少数据
        orderBy: '', // 排序规则
        changeSort: '',
        topselling: [],
        url: 'http://www.finewest.cn',
        updateData: true, // 是否正在加载数据
        isPosting: false,
        hasNoData: false // 是否还有数据
      }
    },
    mounted () {
      this.changeTopselling()
    },
    methods: {
      changeTopselling () {
        this.isPosting = true
        this.$http({
          method: 'get',
          url: this.url + '/m/bangs.htm?size=100&expert=' + this.orderBy,
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          console.log(response)
          this.topselling = response.data
          console.log(response.data)
          this.isPosting = false
          this.updateData = true
        }, function (response) {
          console.log(response)
          console.log('获取数据失败')
        })
      },
      sorting (index) {
        this.changeSort = index
        if (this.filterSorts[index].isFiltering) {
          this.filterSorts[index].isFiltering = false
          this.changeSort = ''
          return
        }
        for (var i = 0; i < this.filterSorts.length; i++) {
          this.filterSorts[i].isFiltering = false
        }
        this.filterSorts[index].isFiltering = true
      },
      changeOneSort (index, index2) {
        this.hasNoData = false
        this.filterSorts[index].isFiltering = false
        this.filterSorts[index].changeRule = index2
        this.changeSort = ''
        if (this.filterSorts[index].oneRule === this.filterSorts[index].sortRules[index2]) {
          return
        }
        this.updateData = false
        this.filterSorts[index].oneRule = this.filterSorts[index].sortRules[index2]
        this.orderBy = this.filterSorts[index].sortRules[index2] === '全部' ? '' : this.filterSorts[index].sortRules[index2]
        this.changeTopselling()
      },
      hideSort () {
        this.changeSort = ''
        for (var i = 0; i < this.filterSorts.length; i++) {
          this.filterSorts[i].isFiltering = false
        }
      }
    }
  }
</script>
<style lang="scss" scope>
  .filter-all-sort{
    height: 40px;
    line-height: 40px;
    position: relative;
  .sorting-one{
    float: left;
    overflow: hidden;
    padding-left: 10px;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
  p{
    font-size: 15px;
    color: #000000;
  &.is-filtering{
     color: #e92d46;
   }
  span{
    font-size: 15px;
    color: #e92d46;
  img{
    vertical-align: middle;
  }
  }
  }
  }
  .filter-start{
    width: 100%;
    position: absolute;
    top: 40px;
    z-index: 99;
    background: #ffffff;
  p{
    margin: 0 12px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 15px;
    color: #000000;
    position: relative;
  &.selected-sort{
     color:#e92d46;
   }
  img{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
  }
  }
  }
  }
  .filter-bg{
    background: #000000;
    opacity: 0.2;
    position: absolute;
    width: 100%;
    height: 100%;
  }
</style>
